<template>
	<view class="root">
		<!-- 使用 common-title 组件 -->
		<view class="title-bar">
			<common-title :title="pageTitle" :showBack="false"></common-title>
			<view class="top-right">
				<view class="top-right-one" style="background-color: '#0F6AF8';">
					<image src="/static/image_record_add.png"></image>
					<view @click="createBrocast()">创建广播</view>
				</view>
				<view class="top-right-two" style="background-color: '#0F6AF8';">
					<image src="/static/image_play.png"></image>
					<view @click="liveBroadcastPage()">实时广播</view>
				</view>

			</view>
		</view>


		<scroll-view scroll-y="true" class="scroll-Y">
			<uni-list :border="false">
				<view v-for="(item, index) in newList" :key="index" class="news-item">

					<view class="news-index">{{index+1}}</view>
					<view class="news-title">{{item.name}}</view>
					<view class="news-type">{{item.messageTypeName}}</view>
					<view class="news-media">{{item.messageFormatName}}</view>
					<view class="news-date">{{item.reminderTime}}</view>
					<view class="news-operate">

						<view class="news-publish" @click="pushMessage(item)">发布</view>
						<view class="news-detail" @click="jumpDetailPage(item)">详情</view>
						<view class="news-delete" @click="deleteMessage(item)">删除</view>
					</view>

				</view>

			</uni-list>

		</scroll-view>

		<!-- 提示窗示例 -->
		<uni-popup ref="aleartPopRef" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="提示" :content="alertContent"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script setup>
	import * as httpConfig from "../../common/http-config.js";
	import * as DataUtils from "../../utils/DataUtils";
	import CommonTitle from '@/components/common-title.vue';
	import {
		onLoad,
		onShow,
		onHide
	} from '@dcloudio/uni-app'
	import {
		ref,
		onMounted,
		onUnmounted,
		computed,
		defineComponent,
		getCurrentInstance,
		reactive

	} from 'vue'
	// 使用 onMounted 钩子自动播放视频
	// 获取当前组件实例
	const instance = getCurrentInstance()
	// 初始化信息
	const initInfo = ref(null)
	const pageTitle = ref("广播列表")

	const alertContent = ref("")


	onMounted(() => {


	});
	onUnmounted(() => {
		console.log("new list onUnmounted.......")


	});

	onShow(() => {
		console.log("onShow...")
		if (instance?.proxy?.$globalData?.initInfo) {
			let jsonStr = instance.proxy.$globalData.initInfo;
			console.log("onMounted jsonStr = " + jsonStr)
			initInfo.value = JSON.parse(jsonStr)
			console.log("onMounted initInfo = " + initInfo.value)

		}
	})
	onHide(() => {
		console.log("onHide...")

	})
	const createBrocast = () => {
		uni.navigateTo({
			url: 'brocast-publish'
		});
	}
	const liveBroadcastPage = () => {
		uni.navigateTo({
			url: 'brocast-real-time'
		});
	}
	
</script>

<style lang="less" scoped>
	@vw: 8.015vw;
	@vh: 5.4vh;

	.root {
		height: 100vh;
		/* 页面高度为 100% */
		overflow: hidden;
		/* 禁止页面滚动 */
		display: flex;
		flex-direction: column;

		.title-bar {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.top-right {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 13/@vh;

				.top-right-one {
					width: 100/@vw;
					height: 32/@vh;
					color: #2C2E30;
					margin-right: 16/@vw;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 3/@vh;
					border: 0.5/@vh solid #0F6AF8;
					color: #2C2E30;

					image {
						margin-right: 4/@vw;
						width: 14/@vw;
						height: 14/@vh;
					}
				}

				.top-right-two {
					width: 100/@vw;
					height: 32/@vh;
					border-radius: 3/@vh;
					background-color: #0F6AF8;
					margin-right: 16/@vw;

					color: white;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						margin-right: 4/@vw;
						width: 14/@vw;
						height: 14/@vh;
					}
				}
			}

		}

		scroll-view {
			height: 100%;


			.news-item {
				height: 40/@vh;
				background-color: white;
				border: 0.5/@vh solid #D0D6DE;
				border-radius: 2/@vh;
				color: #2C2E30;
				margin-top: 7/@vh;
				margin-left: 12/@vw;
				margin-right: 12/@vw;
				font-size: 13/@vh;
				display: flex;
				flex-direction: row;
				align-items: center;


				.news-index {
					flex: 1;
					margin-left: 16/@vw;
				}

				.news-title {
					flex: 3;
				}

				.news-type {
					flex: 2.5;
				}

				.news-media {
					flex: 2.5;
				}

				.news-date {
					flex: 4;
				}

				.news-operate {
					flex: 3;
					display: flex;
					flex-direction: row;
					color: #0F6AF8;

					.news-publish {
						flex: 1;

						display: flex;
						flex-direction: row;
						justify-content: center;
					}

					.news-detail {
						flex: 1;

						display: flex;
						flex-direction: row;
						justify-content: center;
					}

					.news-delete {
						flex: 1;

						display: flex;
						flex-direction: row;
						justify-content: center;
					}
				}




			}
		}

	}
</style>